<template>
  <div>
    <layout-main :active="active">
      <template #left>
        <echart-main class="echartMain">
          <template #title> 资讯中心 </template>
          <template #echart>
            <zxzx-item />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 产业分析 </template>
          <template #echart>
            <echart :options="options1" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 资源统计 </template>
          <template #echart>
            <echart :options="options5" />
          </template>
        </echart-main>
      </template>
      <template #right>
        <echart-main class="echartMain">
          <template #title> 经济体数量变化 </template>
          <template #echart>
            <echart :options="options4" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 经济体收入分析 </template>
          <template #echart>
            <echart :options="options3" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 拥有农机数 </template>
          <template #echart>
            <echart :options="options6" />
          </template>
        </echart-main>
      </template>
    </layout-main>
    <move-img @openImg="openImg"/>
    <people-info v-if="isImg" :imgUrl="imgUrl" @closeImg="closeImg"/>
  </div>
</template>

<script>
import LayoutMain from "components/content/layoutMain/LayoutMain.vue";
import EchartMain from "components/content/echartMain/EchartMain.vue";
import Echart from "components/common/echart/Echart.vue";
import ZxzxItem from './item/ZxzxItem.vue';
import MoveImg from './3D/MoveImg.vue';
import PeopleInfo from 'components/content/item/PeopleInfo.vue';

import {
  echarts1,
  echarts2,
  echarts3,
  echarts4,
  echarts5,
  echarts6,
} from "./echartjs/echarts-ny";

export default {
  components: { LayoutMain, EchartMain, Echart, ZxzxItem, MoveImg, PeopleInfo },
  data() {
    return {
      active: 2,
      options1: null,
      options2: null,
      options3: null,
      options4: null,
      options5: null,
      options6: null,
      isImg: false,
      imgUrl: ''
    };
  },
  created() {
    this.echarts();
  },
  mounted() {},

  methods: {
    closeImg() {
      this.isImg = false
    },
    openImg(n) {
      this.isImg = true
      this.imgUrl = n
    },
    echarts() {
      this.options1 = echarts1([
        { name: "农业", value: 834 },
        { name: "工业", value: 1034 },
        { name: "服务业", value: 1034 },
      ]);
      this.options3 = echarts3(
        [2015, 2016, 2017, 2018, 2019, 2020],
        [
          {
            name: "村集体经济",
            type: "line",
            data: [100, 52, 300, 250, 333, 218],
          },
          {
            name: "农户",
            type: "line",
            data: [52, 250, 218, 555, 444, 111],
          }, 
          {
            name: "企业",
            type: "line",
            data: [22, 222, 111, 333, 123, 444],
          }
        ]
      );
      this.options4 = echarts3(
        [2015, 2016, 2017, 2018, 2019, 2020],
        [
          {
            name: "村集体经济",
            type: "line",
            data: [100, 52, 300, 250, 333, 218],
          },
          {
            name: "农户",
            type: "line",
            data: [52, 250, 218, 555, 444, 111],
          }, 
          {
            name: "企业",
            type: "line",
            data: [22, 222, 111, 333, 123, 444],
          }
        ]
      );
      this.options5 = echarts5({
        x: ["医疗", "教育", "旅游", "园区"],
        y: [100, 52, 300, 250],
      });
      this.options6 = echarts6({
        x: [2015, 2016, 2017, 2018, 2019, 2020],
        y: [100, 52, 300, 250, 333, 218],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.echartMain {
  height: 33.3%;
}
</style>